<template>
     <div class="basicInfoNavigationContainer">
         <div class="content" v-for="(moduleObj,mIndex) in dataList" :key="mIndex">
               <div class="moduleName" @click="moduleClick(moduleObj)">{{moduleObj.type}}</div>
               <div class="item" :rightSideItemId="item.id" :class="{active:item.id === activeId}" v-for="(item,gIndex) in moduleObj.list" :key="gIndex" @click="groupClick(item)">
                  <div class="line"></div>
                  <div class="text">{{item.name}}</div>
               </div>
         </div>
      </div>
</template>

<script>

import { baseInfoNavListGet } from '@/service/api'
import { infoProcessing } from '@/service/personalInfoDataProcessing'


export default {
   props:{
      defaultGroupId:{
         type:String,   // 属性值类型必须是
         required:true
      }
   },
   data(){
      return {
         dataList:[],
         
         // 当前选中的组
         activeId:this.defaultGroupId,
      }
   },
   created(){
      this.loadBaseAllField();
   },
   watch: {
      defaultGroupId(){
         if(this.defaultGroupId == '10100'){
            this.activeId = '10100'
         }
      }
   },
   methods:{
      
      // 加载侧栏数据
      loadBaseAllField(){
         baseInfoNavListGet().then(res => {
            if(res.code == 200){
               var that = this;
               this.dataList = res.data;

               this.groupClick(res.data[0].list[0]);
            }
         });
      },

      // 模块点击
      moduleClick(item){
         this.$emit('moduleClick',item);
      },
      // 组点击
      groupClick(item){
         this.activeId = item.id;
         this.$emit('groupClick',item);
      }
   }
   
}
</script>

<style scoped>


.basicInfoNavigationContainer{
    position: fixed;
    top: 86px;
    bottom:0px;
    right: 24px;
    display: flex;
    flex-direction: column;
    overflow: auto;
    width: 173px;
    font-size: 14px;
}
.basicInfoNavigationContainer::-webkit-scrollbar {
    width: 9px;  /* 横向滚动条宽度 */
    height: 9px; /* 竖向滚动条宽度 */
    background: rgba(0,0,0,.0);
    border:none;
}
/* 滚动条 - 滚动块样式 */
.basicInfoNavigationContainer::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,.0);
    border:none;
    border-radius:4px
}
.basicInfoNavigationContainer>.content{
    display: flex;
    flex-shrink:0;
    flex-direction: column;
    background: white;
    box-shadow: 3px 1px 12px 1px #eaeaea;
    border-radius: 5px;
    padding: 9px 0px;
    padding-top: 0px;
    margin-bottom: 15px;
}
.basicInfoNavigationContainer>.content>.moduleName{
    background: #31478F;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: bold;
    padding: 11px 22px;
    color: white;
    cursor: pointer;

    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.basicInfoNavigationContainer>.content>.item{
    display: flex;
    cursor: pointer;
    flex-shrink: 0;
}
.basicInfoNavigationContainer>.content>.item>.text{
    padding: 9px 22px;
    /* text-align: center; */
    color: #999999;
    background:white;
    flex-grow: 1;
    flex-shrink: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;  /* 使用省略号来代表被修剪的文本 */
    width: 100%;
    box-sizing: border-box;
}
.basicInfoNavigationContainer>.content>.item.active>.text{
    color: #31478F;
    background:#F5F8FD;
    font-weight:bold;
}
.basicInfoNavigationContainer>.content>.item.active>.line{
    width: 3px;
    min-width: 3px;
    background: #31478F;
}



</style>